<style scoped>
.layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;

    /* overflow: hidden; */
}
.pass{
  margin-top: 20px;
}
 .upload{
     display: none;
 }
 .tablelogin{
   position: relative;
   
   top: 40px;
 }
 img{
  
  position: relative;
 
  top:-40px;
  left: -50px;
  /* left: -65px; */
 }
 .btavater{
    position: relative;
    top: 0px;
    left: 27%;
    margin: 0 auto;
    /* left: 70px; */
   
    
   
 }
 .avater{
   position: relative;
   margin: 0 auto;
   top:30px;
 }
p{
  position: relative;
  top: -5px;
}
.layout-logo{
    width: 50px;
    height: 50px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    /* left: 20px; */
}
.layout-nav{
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
}
.bt{
  margin-top: 20px;
  width:300px;
  
}
.layout-footer-center{
    text-align: center;
}
.content{
  /* padding: 0 50px; */
  height: 100vh;
  margin: 0 auto;
}
</style>
<template>
    <div class="layout">
        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark" active-name="1">
                    <!-- <div class="layout-logo"></div> -->
                    <div class="layout-nav">
                          <MenuItem name="3">
                          
                        </MenuItem>
                        <MenuItem name="3">
                          
                        </MenuItem>
                        <MenuItem name="3" >
                            <Icon type="ios-analytics"></Icon>
                           <a  @click="gologin">登录</a> 
                        </MenuItem>
                        <MenuItem name="4">
                            <Icon type="ios-paper"></Icon>
                            beta1.0
                        </MenuItem>
                    </div>
                </Menu>
            </Header>
            <Content class="content" >
                <Breadcrumb :style="{margin: '20px 0'}">
                    <BreadcrumbItem>首页</BreadcrumbItem>
                    <BreadcrumbItem >登录</BreadcrumbItem>
                    <BreadcrumbItem>注册</BreadcrumbItem>
                </Breadcrumb>
                <Card>
                    <div style="min-height: 500px;min-width:300px">
                        
                          <!-- <p slot="title"> 注册</p> -->
                          <div class="avater">
                <input id="up" class="upload" @change="add" type="file">
            <Button class="btavater" type="success" @click="addnew" shape="circle" icon="logo-chrome">上传头像</Button>
              <img :src="uri">
       </div>
                         <div class="tablelogin">
                             <Input  v-model="value1" placeholder="用户名" style="width: 300px" /><br>
                            <Input class="pass" v-model="value2" placeholder="密码" style="width: 300px" /><br>
                             <Button class="bt" type="success" size="large" @click="go" ghost>注册</Button>
                         </div>
                        
                    </div>
                </Card>
            </Content>
            <Footer class="layout-footer-center">2020-2021 &copy; Godguns</Footer>
        </Layout>
    </div>
</template>





<script>
import Vue from 'vue'
import { List,Input,Button,Grid,Card } from 'view-design';
Vue.component('List', List);
Vue.component('Input', Input);
Vue.component('Button', Button);
Vue.component('Grid',Grid);
Vue.component('Card',Card);

export default {
  
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      arr:[],
      value1:"",
      value2:"",
      name:this.$userMsg,
                num:this.$num,
                img1:"",
                  uri :'https://cn.vuejs.org/images/logo.png'
    }
  },

  methods:{
   gologin:function(){
    
       this.$router.push({path: '/login'})
   },
      add(event){
                let reader = new FileReader();
                let img1 = event.target.files[0];
               
				let form = new FormData();
                form.append('file', img1, img1.name);
                this.$axios.post("/upload", form, {
					headers: {
						'Content-Type': 'multipart/form-data'
					}
				}).then(response => {
					
                    this.uri = "http://49.235.16.43:3002/" + response.data[0].path;
                    console.log(this.uri)
					reader.readAsDataURL(img1);
					var that = this;
					reader.onloadend = function() {
						//that.imgs = uri;
					//	console.log(uri)
					}
				
				}).catch(function(err) {
					console.log(err);
				});

            },
                  addnew(){
                 var up=document.getElementById('up');
                 up.click();
                //  $('#img-upload').click();
            },
    go:function(){
     var that=this;
       //alert(that.value2)
     if(that.value1==""||that.value2==""){
       alert("请完整输入用户名或者密码后尝试")
     }else{
          this.$axios.get('/sign',{       // 还可以直接把参数拼接在url后边
        headers:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
       params:{
          name:that.value1,
          password:that.value2,
          avater:that.uri
       }
    }).then(function(res){
     if(res.data!=null){
        alert('注册成功+');
       
          that.$router.push({path: '/login'})
     }else{
       alert('注册失败，请重新尝试')
     }
      
      
    }).catch(function (error) {
        console.log(error);
    });
     }
    
    }
  }
  // created:vue生命周期中的钩子函数，在这个时间点，data中的数据已经注入到响应式系统中



}
</script>


